<template>
  <div>
    <el-container>
      <el-header><Header1></Header1></el-header>
      <el-main>

        <div id="title">模型上传</div>

        <div>
          <el-steps :active="4" align-center>
            <el-step title="步骤1" description="提交模型相关信息"></el-step>
            <el-step title="步骤2" description="提交模型使用规范"></el-step>
            <el-step title="步骤3" description="提交模型运行方式"></el-step>
            <el-step title="步骤4" description="提交模型测试用例"></el-step>
          </el-steps>
        </div>

        <el-form ref="form" :model="fileList" >
          <el-row type="flex" justify="center">
            <el-col :span="4">
              <el-form-item>
                <el-upload
                  class="upload-demo"
                  drag
                  action="https://jsonplaceholder.typicode.com/posts/"
                  :before-upload="onBeforeUpload"
                  :multiple="false"
                  :on-change="handleChange"
                  :file-list="filelist"
                  name="file"
                >
                  <i class="el-icon-upload"></i>
                  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                  <!--<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>-->

                </el-upload>
                <a @click="open">查看模型上传要求</a>
              </el-form-item>
            </el-col>
          </el-row>
          
          <el-row type="flex" justify="center">
            <el-col :span="2">
              <el-form-item>
                <el-button round @click="upload3">上一步</el-button>
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <el-form-item>
                <el-button round @click="doUpload()" type="primary">提交</el-button>
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <el-form-item>
                <el-button round disabled>下一步</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

      </el-main>
      <el-footer height="120px"><Footer></Footer></el-footer>
    </el-container>
  </div>
</template>

<script>

// @ is an alias to /src
import Header1 from "@/components/Header1";
import Footer from "@/components/Footer";


export default {
  name: "upload4",
  components: { Footer, Header1},
  data() {
    return {
      items:[
        Header1
      ],
      form: {
        name: ''
      },
      fileList:[],
      files:[], //要上传的文件对象
      uploadURL:"",
    }
  },
  methods:{
    upload3(){
      this.$router.push("/upload3")
    },
    onBeforeUpload(file) {
      const uploadLimit = 10;
      const uploadType = ['jar'];
      const fileType = file.name.replace(/.+\./,'');
      const isSize = (file.size || 0) / 1024 / 1024 <uploadLimit;
      // console.log(file)
      if(uploadType.indexOf(fileType.toLowerCase()) === -1) {
        this.$message.error('上传文件只能是JAR格式');
        return false;
      }
      if(!isSize) {
        this.$message.error('上传文件大小不能超过10MB');
        return false
      }
      return true;
    },
    doUpload() {
      let fd = new FormData()
      fd.append('File',this.files)
      console.log(this.files)
      let config = {
        header: {
          'Content-Type': 'multipart/form-data'
        }
      }
      this.$axios.post("upload",fd,config).then(res => {
        if(res.data.data === 1) {
          alert(res.data.msg)
        }
      }).catch(res => {
          alert(res.msg)
    })
    //   this.$refs.upload.submit();
    },
    handleChange(file) {
      this.files=file.raw;
      console.log("****========****")
    },

    open() {
        this.$alert('这是一段内容', '标题名称', {
          confirmButtonText: '确定',
          callback: action => {
            this.$message({
              type: 'info',
              message: `action: ${ action }`
            });
          }
        });
      }
  },

}
</script>

<style scoped>
/deep/ .el-step__head.is-finish {
  color: #3A62D7;
  border-color: #3A62D7;
}
/deep/ .el-step__title.is-finish {
  color: #3A62D7;
}
/deep/ .el-step__description.is-finish {
  color: #3A62D7;
}


/deep/ .el-input__inner { /*或者 .s2>>>.el-input__inner  */

  border-radius: 20px; /*输入框圆角值*/
  background-color: #ffffff;
  /*background: transparent;*/
}
a{
  text-decoration:none;
}
a:link {
    color:#606266;
}

a:hover {
    color:#3A62D7;
}
    
a:active {
    color:#606266;
}
.el-button {
  background: #3A62D7;
  border: #3A62D7;
  color: #F5F5F5;
}
.el-row {
  margin-top: 30px;
  margin-bottom: 20px;
}

#title {
  color: #333333;
  font-size: 30px;
  font-weight: bold;
  border: #333333;
  margin-top: 50px;
  margin-bottom: 20px;
}

.el-header{
  background-color: #F5F5F5;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.el-footer {
  background-color: #F5F5F5;
  color: #333;
  text-align: center;
  line-height: 3px;

}

.el-aside {
  background-color: #D3DCE6;
  color: #333;
  text-align: center;
  line-height: 150px;
}

.el-main {
  background-color: #F5F5F5;
  background-size: 100% 100%;
  /*background-color: #E9EEF3;*/
  color: #333;
  text-align: center;
  height: 800px;
  padding: unset;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>